/* collapse
*/
.el-collapse {
  --collapse-color-bg: var(--surface-neutral-secondary-rest);
  --collapse-color-border: var(--stroke-divider-subtle);
  @apply border-0;
  .el-collapse-item {
    @apply rounded-lg;
    background-color: var(--collapse-color-bg);
    & + .el-collapse-item {
      margin-top: 1px;
    }
  }
  .custom-arrow {
    @apply mr-3 ml-0;
    transition: transform var(--el-transition-duration);
    font-size: 20px;
    & ~ .el-collapse-item__arrow {
      display: none;
    }
    &.is-active {
      display: none;
    }
    &.is-active,
    &.is-inactive {
      color: var(--text-cta-rest);
    }
  }
  .el-collapse-item__header {
    @apply border-0 px-3 py-2 h-auto;
    .header-title {
      @apply text-label-1;
      & ~ .custom-arrow {
        @apply ml-auto mr-0;
      }
    }
    &.is-active {
      .custom-arrow {
        &:not(.is-active) {
          @apply rotate-90;
        }
        &.is-inactive {
          display: none;
        }
        &.is-active {
          display: inline-flex;
        }
      }
    }
  }
  .el-collapse-item__wrap {
    @apply p-3;
    background-color: transparent;
    border-top: 1px solid var(--collapse-color-border);
    border-bottom: 0;
  }
  .el-collapse-item__content {
    @apply pb-0;
  }

  /* size */
  &.el-collapse--small {
    .el-collapse-item__header {
      .header-title {
        @apply text-label-2;
      }
    }
  }
  &.el-collapse--large {
    .el-collapse-item__header {
      @apply p-3;
    }
  }
  &.el-collapse--xlarge {
    .custom-arrow {
      &:first-child {
        @apply mr-4;
      }
      & ~ .el-collapse-item__arrow {
        display: none;
      }
    }
    .el-collapse-item__header {
      @apply p-4;
      .header-title {
        @apply text-title-3;
      }
    }
    .el-collapse-item__wrap {
      @apply p-4;
    }
  }
}
